<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <list-roll :list="rolse"></list-roll>
        <!-- <div v-for='ro in rolse'>
            <p>{{ro.roleName}}</p>
            <p>属性：</p>
            <img :src="ro.roleThumbnail" alt="">
        </div> -->
    </div>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // axios.get('http://api.aulence.com/mydata/roles/role-info.php', {
        //         params: {
        //             goodsID: 12
        //         }
        //     })
        //     .then(function (response) {
        //         var data = response.data
        //     })
        //     .catch(function (error) {
        //         console.log(error);
        //     });


        new Vue({
            el: '#box',
            data: {
                rolse: []
            },
            mounted() {
                // let that=this
                axios.get('http://api.aulence.com/mydata/roles/role-info.php', {
                        params: {
                            goodsID: 12
                        }
                    })
                    // .then(function (response) {
                    //     that.rolse=response.data
                    // })
                    //外层直接指向不行的时候需要用箭头函数
                    .then((response) => {
                        this.rolse = response.data
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            components: {
                'list-roll': {
                    props: ['list'],
                    template: `<div><div v-for='ro in list'>
            <p>{{ro.roleName}}</p>
            <p>属性：</p>
            <img :src="ro.roleThumbnail" alt="">
        </div></div>`
                }
            }
        })

    </script>
</body>

</html>